<%@ include file="../layout/taglib.jsp"%>
<html>
<head>

</head>
<body>
	<div class="content-top" id="forum_detail">
		

			<div class="container section group">
				<div class="col span_2_of_contact">
					<div class="">  
						<h3>${topic.subject}</h3>
					    <div>
						    <span>${topic.description}</span>
						</div>
						
						<table class="table table-striped" id="table_resp">
						  <thead>
								<tr>
									<th><t:message code="buy_history_date"/></th>
									<th><t:message code="msg_forum"/></th>
									<th><t:message code="user"/></th>
									<th><t:message code="delete"/></th>
								</tr>
							</thead>
						  <tbody>
						  <c:forEach items="${list_resp}" var="res">
								<tr  class="tr_${res.idResponse}">
									<td width="165px">${res.dateMsg}</td>
									<td>${res.answer}</td>
									<td>
									   <a href="<%=request.getContextPath()%>/viewUser?id=${res.userOfResp.idUser}">  
					   					${res.userOfResp.firstName} 
					   		  		   </a>
									</td>
									<td>
									  <c:if test="${res.userOfResp.idUser eq sessionScope.userFLogin.idUser}">
									    <a href="#" class="msg_line" id="${res.idResponse}"><span
											class="glyphicon glyphicon-remove-sign"></span></a>
									  </c:if>
									</td>
								</tr>
							</c:forEach>
							</tbody>
						</table>
						 
						     
						<div>
						  <span>
						      <a href="#" id="add_msg"><t:message code="add_new_msg"/></a>
						  </span>
				       </div>
						<br/>
						<div style="display: none" id="msg">
							<f:form  modelAttribute="respond" action="" method="POST">
							    <div id="error" class="error"></div>
							    <div>
							       
							        <f:input path="topic.idTopic" type="hidden"
										value="${topic.idTopic}" id="id_topic"/>
									
									<f:input path="userOfResp.idUser" type="hidden"
										value="${sessionScope.userFLogin.idUser}" id="id_user"/>	
										
									<span><label><t:message code="msg_forum"/></label></span> 
									<span>
									   <f:textarea path="answer" rows="15" cols="50" id="answer"/>
									</span>
								</div>
	
								<div>
									<span><input class="submit" type="button" value="<t:message code="save"/>"></span>
								</div>
							 
							    
							</f:form>
							
							<div id="result_id"></div>
						</div>
					</div>

				</div>
				<div class="col span_1_of_contact">
					<div class="company_address">
						<h3>Company Information :</h3>
						<p>500 Lorem Ipsum Dolor Sit,</p>
						<p>22-56-2-9 Sit Amet, Lorem,</p>
						<p>Phone:(00) 222 666 444</p>
						<p>Fax: (000) 000 00 00 0</p>
						<p>
							Email: <span>info[at]mycompany.com</span>
						</p>
						<p>
							Follow on: <span>Facebook</span>, <span>Twitter</span>
						</p>
					</div>
				</div>
				<div class="clear"></div>
			</div>
	</div>
</body>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript"  src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	   $('#add_msg').click(function(){
		   $("#msg").show("slow");
		   $("#add_msg").hide();
		   		   
		});
	   
	    $('.submit').click(function(e){
		   var id_topic = $('#id_topic').val();
		   var id_user = $('#id_user').val();
		   var answer = $('#answer').val();
		   $.ajax({
			    type:'POST',
			    data: "topic.idTopic=" + id_topic + "&answer=" + answer + "&userOfResp.idUser=" + id_user,
                url : '<%=request.getContextPath()%>/forum/save_msg',
		        success : function(data){
		        	
		        	if(data.status == "SUCCESS"){
		        		
		        		var date = new Date( data.result.dateMsg),
		        	    yr = date.getFullYear(),
		        	    month = +date.getMonth() < 10 ? '0' + date.getMonth() : date.getMonth() ,
		        	    day = +date.getDate() < 10 ? '0' + date.getDate() : date.getDate(),
		        	    newDate = day + '-' + month + '-' + yr;
		        	    $('#error').hide('slow');
			        	$('#table_resp').last().append(
			        	  '<tr  class="tr_'+data.result.idResponse+'">'
			        	      + '<td>' + newDate
			        	      + '</td>'
			        	      + '<td>' + data.result.answer
			        	      + '</td>'
			        	      + '<td>'
			        	      + 'You </td>'
			        	      + '<td>'
			        	      + '<a href="#" class="msg_line" id="'+data.result.idResponse+'">Delete</a> </td>'
			        	   + '</tr>'		
			        	
			        	);
		        	
		        	}
		        	else{
		        		 errorInfo = "";
 						 for(i =0 ; i < data.result.length ; i++){
							errorInfo += "<br>" + (i + 1) +". " + data.result[i].code;
						}
						 $('#error').html("Please correct the following error: " + errorInfo);
						 $('#error').show('slow');

		        	}
		        }
                
                
		   });
		   
		   clearInputs();
		   e.preventDefault();
		});
	   
	    
	    $("#table_resp").on('click','.msg_line',function(){
	    	
	        $(this).parent().parent().remove();
	        var id_res= this.id;
	    	
	    	  $.ajax({
				    type:'GET',
				    data: "idResponse=" + id_res,
	                url : '<%=request.getContextPath()%>/forum/del_resp',
			        success : function(data){
			        }
	            });
	    });
	   
});


function clearInputs(){
	$('#answer').val('');
	
}
</script>
